import * as echarts from "echarts"
import React, { useEffect, useRef } from "react"

const axisOption = {

    legend: {
        // 图例文字颜色
        textStyle: {
            color: "#333",
        },
    },
    grid: {
        left: "20%",
    },
    // 提示框
    tooltip: {
        trigger: "axis",
    },
    xAxis: {
        type: "category", // 类目轴
        data: [],
        axisLine: {
            lineStyle: {
                color: "#17b3a3",
            },
        },
        axisLabel: {
            interval: 0,
            color: "#333",
        },
    },
    yAxis: [
        {
            type: "value",
            axisLine: {
                lineStyle: {
                    color: "#17b3a3",
                },
            },
        },
    ],
    color: ["#2ec7c9", "#b6a2de"],
    series: [

    ],

}

const noaxisOption = {

    tooltip: {
        trigger: "item",
    },
    color: [
        "#0f78f4",
        "#dd536b",
        "#9462e5",
        "#a6a6a6",
        "#e1bb22",
        "#39c362",
        "#3ed1cf",
    ],
    series: [

    ],


}

const Echarts = ({ style, chartData, isAxisChart = true }) => {
    //获取dom实例
    const chartRef = useRef(null)
    let echartObj = useRef(null)
    useEffect(() => {
        let options
        //echart的初始化,获得当前的元素
        // @ts-ignore
        echartObj.current = echarts.init(chartRef.current)
        //设置option
        if (isAxisChart) {
            //设置x轴
            axisOption.xAxis.data = chartData.xAxisData
            axisOption.series = chartData.series
            options = axisOption
        }
        else {
            noaxisOption.series = chartData.series
            options = noaxisOption

        }
        // @ts-ignore
        echartObj.current.setOption(options)
    }
        , [chartData])
    return (
        <div style={style} ref={chartRef}></div>
    )

}
export default Echarts
